<template>
  <div class="mainTainPlant">
    <div class="title">{{title}}<i class="el-icon-close" @click="close"></i></div>
    <div class="content">
      <!-- 单车用量 -->
      <div class="con" v-if="mtpPar.type == 1">
        <div class="inputs">
          <span class="inp_text">单车用量</span>
          <el-input type="number" v-model="input_type" placeholder="请输入单车用量" clearable></el-input>
        </div>
      </div>
      <!-- 单包用量 -->
      <div class="con" v-if="mtpPar.type == 2">
        <div class="inputs">
          <span class="inp_text">单包用量</span>
          <el-input type="number" v-model="input_type" placeholder="请输入单包用量" clearable></el-input>
        </div>
      </div>
      <!-- 到货时间 -->
      <div class="con" v-if="mtpPar.type == 3">
        <div class="inputs2">
          <span class="input2_title">请选择每周到货时间</span>
          <div class="days">
            <div :class="item.choose?'day dayChoose':'day'" v-for="(item,index) in daysList" :key="index" @click="chooseDaysClick(index)">
              {{item.name}}
              <div class="dayChoose_icon" v-if="item.choose">
                <div class="iconBack">
                  <i class="el-icon-check"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 提前时间 -->
      <div class="con" v-if="mtpPar.type == 4">
        <div class="inputs">
          <span class="inp_text">提前时间(天)</span>
          <el-input type="number" v-model="input_type" placeholder="请输入提前时间(天)" clearable></el-input>
        </div>
      </div>
      <div class="buttons">
        <el-button @click="close">取消</el-button>
        <el-button @click="submitClick" type="primary">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  export default {
    props:['mtpPar'],
    name: "mainTainPlant",
    data() {
      return {
        title: '',
        input_type: '', //单车/单车用量
        daysList: [{
          name:'周一',
          choose: false
        },{
          name:'周二',
          choose: false
        },{
          name:'周三',
          choose: false
        },{
          name:'周四',
          choose: false
        },{
          name:'周五',
          choose: false
        },{
          name:'周六',
          choose: false
        },{
          name:'周日',
          choose: false
        },], //日期列表
      }
    },
    created() {
      let self = this
      switch (self.mtpPar.type) {
        case 1:
          self.title = '修改单车用量'
          self.input_type = self.mtpPar.par
          break;
        case 2:
          self.title = '修改单包用量'
          self.input_type = self.mtpPar.par
          break;
        case 3:
          self.title = '到货时间'
          //将日期显示在视图层
          for (let i = 0; i < self.mtpPar.par.length; i++){
            switch (self.mtpPar.par[i]) {
              case '1':
                self.daysList[0].choose = true
                break
              case '2':
                self.daysList[1].choose = true
                break
              case '3':
                self.daysList[2].choose = true
                break
              case '4':
                self.daysList[3].choose = true
                break
              case '5':
                self.daysList[4].choose = true
                break
              case '6':
                self.daysList[5].choose = true
                break
              case '7':
                self.daysList[6].choose = true
                break
            }
          }
          break;
        case 4:
          self.title = '修改提前时间'
          self.input_type = self.mtpPar.par
          break;
      }
    },
    mounted() {
    },
    methods: {
      ...mapActions(['upstate']),
      //关闭
      close(){
        let self = this
        self.upstate({key:'showMainTainPlant',val:false})
      },
      //选择日期
      chooseDaysClick(index){
        let self = this
        switch (index) {
          case 0:
            self.daysList[0].choose = !self.daysList[0].choose
            break
          case 1:
            self.daysList[1].choose = !self.daysList[1].choose
            break
          case 2:
            self.daysList[2].choose = !self.daysList[2].choose
            break
          case 3:
            self.daysList[3].choose = !self.daysList[3].choose
            break
          case 4:
            self.daysList[4].choose = !self.daysList[4].choose
            break
          case 5:
            self.daysList[5].choose = !self.daysList[5].choose
            break
          case 6:
            self.daysList[6].choose = !self.daysList[6].choose
            break
        }
      },
      //确认
      submitClick(){
        let self = this
        switch (self.mtpPar.type) {
          case 1:
            if (self.input_type != ''){
              self.mtpPar.item["quantity2"] = self.input_type
              let data = []
              data.push(self.mtpPar.item)
              self.$http.post(self.conURL + 'pm/api/material_param',data).then(res => {
                self.$notify({
                  title: '成功',
                  message: '修改单车用量成功',
                  type: 'success'
                });
                self.$emit('getBack',true)
              })
            } else {
              this.$notify({
                title: '警告',
                message: '单车用量不能为空',
                type: 'warning'
              });
            }
            break
          case 2:
            if (self.input_type != ''){
              self.mtpPar.item["quantity3"] = self.input_type
              let data = []
              data.push(self.mtpPar.item)
              self.$http.post(self.conURL + 'pm/api/material_param',data).then(res => {
                self.$notify({
                  title: '成功',
                  message: '修改单包用量成功',
                  type: 'success'
                });
                self.$emit('getBack',true)
              })
            } else {
              this.$notify({
                title: '警告',
                message: '单包用量不能为空',
                type: 'warning'
              });
            }
            break
          case 3:
            let newList = ''
            for (let i = 0; i < self.daysList.length; i++){
              if (self.daysList[i].choose){
                newList += (i + 1) + ','
              }
            }
            if (newList != ''){
              self.mtpPar.item["frequency"] = newList.substring(0,newList.length - 1)
              let data = []
              data.push(self.mtpPar.item)
              self.$http.post(self.conURL + 'pm/api/material_param',data).then(res => {
                self.$notify({
                  title: '成功',
                  message: '修改到货时间成功',
                  type: 'success'
                });
                self.$emit('getBack',true)
              })
            } else {
              this.$notify({
                title: '警告',
                message: '到货时间不能为空',
                type: 'warning'
              });
            }
            break
          case 4:
            if (self.input_type != ''){
              self.mtpPar.item["leadTime"] = self.input_type
              let data = []
              data.push(self.mtpPar.item)
              self.$http.post(self.conURL + 'pm/api/material_param',data).then(res => {
                self.$notify({
                  title: '成功',
                  message: '修改提前时间成功',
                  type: 'success'
                });
                self.$emit('getBack',true)
              })
            } else {
              this.$notify({
                title: '警告',
                message: '提前时间不能为空',
                type: 'warning'
              });
            }
            break
        }
      },
    }
  }
</script>

<style lang="less">
  .mainTainPlant{
    display: flex;
    flex-direction: column;
    width: 450px;
    height: 273px;
    margin: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 10;
    border-radius: 5px;
    .title{
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      color: #999999;
      background: #fafafa;
      border-bottom: 1px solid #e5e5e5;
      position: relative;
      .el-icon-close{
        font-size: 12px;
        color: #7c7c7c;
        position: absolute;
        top: 19px;
        right: 19px;
        cursor: pointer;
      }
    }
    .content{
      display: flex;
      flex-direction: column;
      .con{
        width: 100%;
        height: 160px;
        border-bottom: 1px solid #e5e5e5;
        .inputs{
          display: flex;
          flex-direction: row;
          margin-top: 30px;
          .inp_text{
            width: 123px;
            line-height: 40px;
            font-size: 14px;
            color: #666666;
            text-align: center;
          }
          .el-input{
            width: 285px;
            height: 40px;
          }
          input::-webkit-outer-spin-button,
          input::-webkit-inner-spin-button {
            -webkit-appearance: none;
          }
          input[type="number"]{
            -moz-appearance: textfield;
          }
        }
        .inputs2{
          display: flex;
          flex-direction: column;
          .input2_title{
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: #555555;
            text-align: center;
          }
          .days{
            display: flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap: wrap;
            padding: 0 50px;
            box-sizing: border-box;
            .day{
              width: 74px;
              height: 36px;
              line-height: 36px;
              text-align: center;
              border: 1px solid #dddddd;
              border-radius: 2px;
              font-size: 20px;
              color: #555555;
              cursor: pointer;
              margin-right: 10px;
            }
            .dayChoose{
              border-color: #3384dd;
              color: #3384dd;
              position: relative;
              .dayChoose_icon{
                position: absolute;
                right: 0;
                bottom: 0;
                .iconBack{
                  width: 0;
                  height: 0;
                  border-bottom: 18px solid #3384dd;
                  border-left: 18px solid transparent;
                  .el-icon-check{
                    position: absolute;
                    right: -1px;
                    bottom: -1px;
                    color: #fff;
                    font-size: 10px;
                  }
                }
              }
            }
            .day:nth-child(5),.day:nth-child(6),.day:nth-child(7){
              margin-top: 10px;
            }
          }
        }
      }
      .buttons{
        width: 100%;
        height: 61px;
        background: #fafafa;
        display: flex;
        flex-direction: row;
        justify-content: center;
        .el-button{
          width: 95px;
          height: 40px;
          margin-top: auto;
          margin-bottom: auto;
        }
      }
    }
  }
</style>
